{extend name="common:base" /}

{block name="main"}
<div class="admin-content-body">
    <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">角色权限</strong> / <small>Role Rule</small></div>
    </div>

    <hr>

    <div class="am-g">
        <div class="am-u-sm-12 am-u-md-3">
            <button type="" class="am-btn am-btn-primary" id="addrole-prompt-show">添加新角色</button>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-form-group">
                <select name="filter" data-am-selected="{btnSize: 'sm'}">
                    <option value="all">显示所有角色</option>
                    <option value="2">可用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
        </div>
        <div class="am-u-sm-12 am-u-md-3">
            <div class="am-input-group am-input-group-sm">
                <input type="text" class="am-form-field" id="ser_input" onkeydown="EnterPress()">
                <span class="am-input-group-btn">
                <button id="ser_button" class="am-btn am-btn-default" type="button">搜索</button>
            </span>
            </div>
        </div>
    </div>

    <div class="am-g">
        <div class="am-u-sm-12">
            <form class="am-form">
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr>
                        <th class="table-id">id</th>
                        <th class="table-title">名称</th>
                        <th class="table-title">状态</th>
                        <th class="table-type">描述</th>
                        <th class="table-set">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="list" id="vo"}
                    <tr data-roleid="{$vo.role_id}">
                        <td>{$vo.role_id}</td>
                        <td><a href="#">{$vo.name}</a></td>
                        <td>{$vo.status}</td>
                        <td>{$vo.remark}</td>
                        <td >
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                     <button class="am-btn am-btn-default am-btn-xs am-text-secondary"  type="button"><span class="am-icon-pencil-square-o"></span>
                                            编辑权限
                                    </button>  
                                     <button class="am-btn am-btn-default am-btn-xs am-text-secondary editrole-prompt-show"  type="button" id=""><span class="am-icon-pencil-square-o"></span>
                                            编辑
                                    </button>  
                                     <button class="am-btn am-btn-default am-btn-xs am-text-secondary deleterole-prompt-show"  type="button"><span class="am-icon-pencil-square-o"></span>
                                            删除
                                    </button>  
                                </div>
                            </div>
                        </td>
                    </tr>
                    {/volist}
                    </tbody>
                </table>
                <div class="am-cf">
                </div>
            </form>
        </div>

    </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="addrole-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">添加角色</div>
        <div class="am-modal-bd">
            <form class="am-form" id="form-addrole">
                <input type="text" class="" name="name" placeholder="名称">
                <br>
                <textarea name="remark" placeholder="备注一下"></textarea>
            </form>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" id="btn-addrole-prompt" data-am-modal-confirm>提交</span>
        </div>
    </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="editrole-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">编辑角色</div>
        <div class="am-modal-bd">
            <form class="am-form" id="form-editrole">
                <input type="text" class="hide" name="role_id" style="display: none">
                <input type="text" class="" name="name" placeholder="名称">
                <br>
                <textarea name="remark" placeholder="备注一下"></textarea>
                <div class="am-radio">
                  <label>
                    <input type="radio" name="status" value="1" checked>
                    正常
                  </label>
                </div>
                <div class="am-radio">
                  <label>
                    <input type="radio" name="status" value="0">
                    禁用
                  </label>
                </div>
            </form>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" id="btn-editrole-prompt" data-am-modal-confirm>提交</span>
        </div>
    </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="deleterole-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">删除角色？</div>
        <div class="am-modal-bd">
            <form class="am-form" id="form-deleterole">
                <input type="text" class="hide" name="role_id" style="display: none">
            </form>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" id="btn-editrole-prompt" data-am-modal-confirm>提交</span>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script type="text/javascript">
//编辑角色
$('.editrole-prompt-show').on('click', function() {
    var tr = $(this).parents('tr');
    $('#form-editrole').find('input[name=role_id]').val(tr.data('roleid'));
    console.log(tr);
        $('#editrole-prompt').modal({
            relatedTarget: this,
            onConfirm: function(e) {
                $.ajax({
                    url: "{:url('admin/rbac/editRole')}",
                    type: 'POST',
                    data: $('#form-editrole').serialize(),
                    success: function(data) {
                        console.log(data);
                        if(data.code) {
                            location.reload();
                        } else {
                            $alert = $('#am-alert');
                            $alert.find('.content').text(data.msg);
                            $alert.modal('open');
                        }
                    },
                    error:function(){
                        $alert = $('#am-alert');
                        $alert.find('.content').text('系统出错啦');
                        $alert.modal('open');
                    }
                })
            }
        });
    });
//添加角色
$('#addrole-prompt-show').on('click', function() {
        $('#addrole-prompt').modal({
            relatedTarget: this,
            onConfirm: function(e) {
                $.ajax({
                    url: "{:url('admin/rbac/addRole')}",
                    type: 'POST',
                    data: $('#form-addrole').serialize(),
                    success: function(data) {
                        console.log(data);
                        if(data.code) {
                            location.reload();
                        } else {
                            $alert = $('#am-alert');
                            $alert.find('.content').text(data.msg);
                            $alert.modal('open');
                        }
                    },
                    error:function(){
                        $alert = $('#am-alert');
                        $alert.find('.content').text('系统出错啦');
                        $alert.modal('open');
                    }
                })
            }
        });
    });
//删除角色
$('.deleterole-prompt-show').on('click', function() {

    var tr = $(this).parents('tr');
    $('#form-deleterole').find('input[name=role_id]').val(tr.data('roleid'));
        $('#deleterole-prompt').modal({
            relatedTarget: this,
            onConfirm: function(e) {
                $.ajax({
                    url: "{:url('admin/rbac/deleteRole')}",
                    type: 'POST',
                    data: $('#form-deleterole').serialize(),
                    success: function(data) {
                        console.log(data);
                        if(data.code) {
                            location.reload();
                        } else {
                            $alert = $('#am-alert');
                            $alert.find('.content').text(data.msg);
                            $alert.modal('open');
                        }
                    },
                    error:function(){
                        $alert = $('#am-alert');
                        $alert.find('.content').text('系统出错啦');
                        $alert.modal('open');
                    }
                })
            }
        });
    });
</script>
{/block}
